<template>
<div class="container">
  <div class="header">
    
  </div>
  <div class="main">
    <Camera @picChange="setPic1" class="item"></Camera>
    <Camera @picChange="setPic2" class="item"></Camera>
    <ResultView @startFace="startFace" :detailinfo="detailinfo" class="item"></ResultView>
  </div>
</div>
</template>

<script>
import Camera from '../components/camera.vue'
import ResultView from '../components/resultview.vue'
import axios from 'axios'
export default {
    components: {
        Camera,
        ResultView
    },
    data() {
      return {
        "sfz":null,
        "pic":null,
        "stuinfo":null,
        "detailinfo":null
      }
    },
    watch: {
      sfz(val){
        axios.post("http://127.0.0.1:8000/sfz_ocr/",{
          "sfz":this.sfz
        }).then(res=>{
          console.log(res)
          res = res.data
          if (res.result !== true){
              this.msg(res.message)
          } else{
            this.stuinfo = res.data
          }
        })
      },
      stuinfo(val){
        axios.get("http://127.0.0.1:8000/student/get_info_by_sfz/?sfzid="+val.sfzid).then(res=>{
          res=res.data
          if(res.result === true){
            this.detailinfo=res.data
          }
        })
      }
    },
    methods:{
      msg(msg) {
        this.$notify({
          title: msg,
          message: msg,
        });
      },
      setPic1(pic){
        this.sfz=pic
      },
      setPic2(pic){
        this.pic=pic
      },
      // 发起比对
      startFace(){
        if (this.sfz && this.pic) {
          axios.post("http://127.0.0.1:8000/faceid/",{
            "sfz":this.sfz,
            "pic":this.pic,
            "sfzid":this.stuinfo.sfzid
          }).then(res=>{
            console.log(res)
            res=res.data
            if(res.result === true){
              var sorce_result = res.data
              var sorce = sorce_result["Score"]
              this.msg("相似度:"+String(sorce,2)+"%")
            }
          })
        } else{
          alert("请先拍照")
        }
      }
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .main{
    height: 80vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* background-color: red; */
  }
  .item{
    margin: 10px;
  }
</style>
